<template>
  <div id="AssemblyAndDisassembly">
    <root name="AssemblyAndDisassembly">
      <SafeHeader
        v-bind="{
          title: '组托拆托',
          isBack: true,
          fixedTop: true,
        }"
      >
      </SafeHeader>
      <div class="AssemblyAndDisassembly">
        <v-container style="background: #193690" class="pa-1">
          <v-row class="ma-0 d-flex justify-center align-center">
            <v-col cols="12" class="pa-0 d-flex justify-center align-center">
              <v-chip
                @click="assemblyDialog"
                class="
                  ma-1
                  d-flex
                  justify-center
                  align-center
                  AssemblyAndDisassembly_chip
                "
                ><span style="font-size: 16px; color: #f8a73c">0</span></v-chip
              >
            </v-col>
            <v-col cols="12" class="pa-0">
              <span
                class="ma-1 d-flex justify-center align-center font-weight-bold"
                style="color: #dcdcde; font-size: 16px"
                >已扫箱数</span
              >
            </v-col>
          </v-row>
        </v-container>
        <v-container class="pa-0">
          <v-container class="pt-8 pb-0 px-4">
            <v-card class="d-flex flex-column pb-4 pt-2">
              <v-row
                class="ma-0 font-weight-bold"
                style="font-size: 16px; line-height: 1.5"
              >
                <v-col class="d-flex justify-center py-1"> BOX_01 </v-col>
              </v-row>
              <v-row class="ma-0 px-2">
                <v-col cols="4" class="py-0 pb-1">物料编码</v-col>
                <v-col class="py-0 pb-1"></v-col>
              </v-row>
              <v-row class="ma-0 px-2">
                <v-col cols="4" class="py-0 pb-1">物料名称</v-col>
                <v-col class="py-0 pb-1"></v-col>
              </v-row>
              <v-row class="ma-0 py-0 px-2">
                <v-col cols="4" class="py-0 pb-1">批次</v-col>
                <v-col class="py-0 pb-1"></v-col>
              </v-row>
              <v-row class="ma-0 py-0 px-2">
                <v-col cols="6" class="pa-0"
                  ><v-row class="ma-0">
                    <v-col cols="6" class="py-0 pb-1">数量</v-col>
                    <v-col class="py-0 pb-1"></v-col> </v-row
                ></v-col>
                <v-col class="pa-0">
                  <v-row class="ma-0">
                    <v-col cols="6" class="py-0 pb-1">单位</v-col>
                    <v-col class="py-0 pb-1"></v-col>
                  </v-row>
                </v-col> </v-row
            ></v-card>
          </v-container>

          <v-row
            style="background: #193690"
            class="ma-0 pa-1 pt-15 mt-n14 justify-center"
            ><v-col cols="8" class="py-1">
              <v-text-field
                dense
                outlined
                hide-details
                background-color="#fff"
              ></v-text-field> </v-col
          ></v-row>
          <v-row class="ma-0 pa-0"
            ><v-col cols="12" class="py-0 d-flex justify-center">
              <span
                style="background: #fff; font-size: 14px; color: #656566"
                class="py-1 px-2"
                >无托盘不用扫码</span
              >
            </v-col></v-row
          >
        </v-container>
        <v-container class="mt-5 pa-0">
          <v-row class="ma-0 px-3">
            <v-col class="py-3">
              <v-text-field outlined dense hide-details> </v-text-field>
            </v-col>
          </v-row>
          <!-- <v-row class="ma-0">
            <v-col class="pa-0 px-1">
              <v-btn block color="#193690" dark>提交</v-btn>
            </v-col>
          </v-row> -->
        </v-container>
        <v-bottom-navigation
          height="60"
          fixed
          style="background: transparent; box-shadow: none"
        >
          <v-row
            class="pa-0 ma-0 justify-center"
            style="background: transparent"
          >
            <v-col
              cols="12"
              class="pa-0 ma-0 d-flex justify-center align-center mb-2 px-2"
              style="background: transparent"
            >
              <v-btn
                class="wms-submit-btn"
                block
                style="
                  background-color: #193690;
                  height: 100%;
                  border-radius: 10px;
                  font-size: 1rem;
                  color: #fff !important;
                "
                >提交</v-btn
              >
            </v-col>
          </v-row>
        </v-bottom-navigation>
        <v-dialog v-model="dialog">
          <v-card class="assemblyDialog" outlined>
            <v-card-title class="headline card-title pa-4 font-weight-bold">
              已扫箱码列表
            </v-card-title>
            <v-container>
              <v-data-table
                class="elevation-1"
                dense
                mobile-breakpoint="0"
                :headers="headers"
                :items="desserts"
                hide-default-footer
              >
                <template v-slot:[`header.name`]="{ header }">
                  {{ header.text.toUpperCase() }}
                </template>
                <template v-slot:[`item.actions`]="{ item }">
                  <!-- <v-icon small class="mr-2"> mdi-pencil {{ item }}</v-icon> -->
                  <v-icon small> mdi-delete {{ item }} </v-icon>
                </template>
              </v-data-table>
            </v-container>
            <v-card-actions class="assemblyDialog_btn">
              <v-btn color="#193690" block dark bottom> 确认 </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </div>
    </root>
  </div>
</template>

<script>
import Root from "@/components/Root.vue";
import SafeHeader from "@/components/safeHeader_wms.vue";
export default {
  components: { Root, SafeHeader },
  name: "AssemblyAndDisassembly",
  data() {
    return {
      dialog: false,
      headers: [
        {
          text: "箱码值",
          align: "start",
          sortable: false,
          value: "code",
        },
        {
          text: "来源托盘",
          value: "pallet",
        },
        { text: "操作", value: "actions", sortable: false },
      ],
      desserts: [
        {
          code: "Frozen Yogurt",
          pallet: 159,
        },
        {
          code: "Frozen Yogurt",
          pallet: 159,
        },
        {
          code: "Frozen Yogurt",
          pallet: 159,
        },
        {
          code: "Frozen Yogurt",
          pallet: 159,
        },
        {
          code: "Frozen Yogurt",
          pallet: 159,
        },
      ],
    };
  },
  methods: {
    assemblyDialog() {
      this.dialog = true;
    },
  },
};
</script>

<style lang="sass" scoped>
.AssemblyAndDisassembly
  .AssemblyAndDisassembly_chip
    width: 50px
    height: 50px
    border-radius: 50%
.assemblyDialog
  .headline
    background-color: #193690
    color: #fff
    justify-content: center
    font-size: 18px !important
    line-height: 1.75
    padding: 8px 12px 8px 12px !important
  // .assemblyDialog_btn
  //   position: fixed
  //   bottom: 0
</style>